<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>笑脸</title>
		<style>
			#d1{
				width: 500px;
				height: 500px;
				background-color: #ffaa00;
				border-radius: 50%;
				position: relative;
				left: 412px;
				top: 120px;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: #ffaaff;
				border-radius: 50%;
				position: relative;
				left: 59px;
				top: 180px;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: #ffaaff;
				border-radius: 50%;
				position: relative;
				left: 279px;
				top: 9px;
			}
			#d4{
				width: 150px;
				height: 40px;
				background-color: #ffffff;
				border-radius: 50%;
				position: relative;
				left: -285px;
				top:-59px;
			}
			#d5{
				width: 150px;
				height: 40px;
				background-color: #ffffff;
				border-radius: 50%;
				position: relative;
				left: 262px;
				top: 3px;
			}
			#d6{
				width: 40px;
				height: 40px;
				background-color: #000000;
				border-radius: 50%;
				position: relative;
				left: -262px;
				top: 0px;
			}
			#d7{
				width: 40px;
				height: 40px;
				background-color: #000000;
				border-radius: 50%;
				position: relative;
				left: 262px;
				top: 0px;
			}
			#d8{
				border: 8px solid #000000;
				width: 350px;
				height: 350px;
				border-bottom-color: #000000;
				border-top-width: 0px;
				border-right-width: 0px;
				border-left-width: 0px;
				border-radius:0px 0px 500px 500px;
				position: relative;
				left: -242px;
				top: -73px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				<div id="d3">
					<div id="d4">
						<div id="d5">
							<div id="d6">
								<div id="d7">
									<div id="d8"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>